<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="favicon.ico?v=1.2" />
  <link href="./css/common.css" rel="stylesheet">
  <link href="./css/index.css?v=2.1" rel="stylesheet">
  <link href="./iconfont/iconfont.css" rel="stylesheet">
  <script src="./js/common.js"></script>
  <script src="./js/config.js"></script>
</head>

<body class="bg-gray-50">
  <div id="app" v-cloak>
    <nav class="fixed top-0 left-0 right-0 bg-white bg-opacity-95 shadow-sm z-50">
      <div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
        <div class="profile">
          <img src="./img/logo.jpg">
          <a href="javascript:;" class="text-2xl font-['Pacifico'] text-gray-800">{{myInfo.name}}</a>
        </div>
        <div class="flex items-center space-x-8">
          <a href="javascript:;" v-for="(item,key) in columns" :key="key" class="nav-link text-gray-800 font-medium" @click="toView(item.id)">
            <i class="iconfont" :class="item.icon"></i>
            <span>{{item.label}}</span>
          </a>
        </div>
      </div>
    </nav>
    <header class="pt-32 pb-20 bg-gradient-to-br from-blue-50 to-green-50" id="about">
      <div class="max-w-7xl mx-auto px-6">
        <div class="flex items-center justify-between">
          <div class="max-w-2xl">
            <h1 class="text-4xl font-bold text-gray-900 mb-6">{{pageInfo.slogen}}</h1>
            <p class="text-lg text-gray-600 mb-4">{{pageInfo.personalProfile}}</p>
            <p class="text-sm text-gray-500 mb-2" v-for="(item,key) in pageInfo.skillDisplay" :key="key">{{key+1}}. {{item}}</p>
          </div>
          <img src="./img/works.jpg" :alt="pageInfo.bannerAlt" class="w-96 h-96 object-cover rounded-lg shadow-lg">
        </div>
      </div>
    </header>

    <section class="py-20" id="works">
      <div class="max-w-7xl mx-auto px-6">
        <div class="flex items-center justify-between mb-12">
          <h2 class="text-3xl font-bold text-gray-900">{{pageInfo.modulesBigTitle}}</h2>
          <div class="flex items-center space-x-4">
            <button 
              v-for="(item,key) in categorizes" :key="key" 
              class="!rounded-button px-4 py-2 font-medium whitespace-nowrap categorizes-item"
              :class="{'bg-primary text-white':categorizesActiveIndex === key,'bg-white text-gray-600 hover:bg-gray-50':categorizesActiveIndex !== key}"
              @click="changeCategorize(key,item)"
            >
              {{item.label}}({{getModulesNum(item)}})
            </button>
          </div>
        </div>

        <div class="grid grid-cols-4 gap-8">
          <div class="work-card bg-white rounded-lg overflow-hidden shadow-sm"
            v-for="(item,key) in modules"
            :key="key"
            @click="toLink(item)">
            <img :src="item.image ? item.image : './img/kj.png'" :class="{'miniprogram':item.type === 'miniprogram'}" :alt="item.title" :title="item.title" class="w-full">
            <div class="p-3">
              <h4 class="text-lg font-bold text-gray-900 mb-2">{{item.title}}</h4>
              <p class="text-xs text-gray-400">{{item.desc}}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="py-0" id="memory">
      <div class="max-w-7xl mx-auto px-6">
        <div class="flex items-center justify-between mb-12">
          <h2 class="text-3xl font-bold text-gray-900">{{pageInfo.memoryBigTitle}}</h2>
          <div class="flex items-center space-x-4">
            <button 
              v-for="(item,key) in categorizesMemory" :key="key" 
              class="!rounded-button px-4 py-2 font-medium whitespace-nowrap categorizes-item"
              :class="{'bg-primary text-white':categorizesActiveMemoryIndex === key,'bg-white text-gray-600 hover:bg-gray-50':categorizesActiveMemoryIndex !== key}"
              @click="changeCategorizeMemory(key,item)"
            >
              {{item.label}}({{getModulesNumMemory(item)}})
            </button>
          </div>
        </div>

        <div class="grid grid-cols-4 gap-8">
          <div class="work-card bg-white rounded-md overflow-hidden shadow-sm"
            v-for="(item,key) in memoryList"
            :key="key"
            @click="toLink(item)">
            <div class="p-3">
              <h3 class="text-xl font-bold text-blue-900 mb-0">
                <i v-if="item.type === 'animation'" class="iconfont icon-cssdonghua"></i>
                <i v-if="item.type === 'plug-in'" class="iconfont icon-a-bianzu23"></i>
                <i v-if="item.type === 'nav'" class="iconfont icon-daohang"></i>
                <i v-if="item.type === 'carousel'" class="iconfont icon-a-003_lunbotu"></i>
                <i v-if="item.type === 'image'" class="iconfont icon-tupian"></i>
                <i v-if="item.type === 'page'" class="iconfont icon-yemian"></i>
                {{item.title}}
              </h3>
            </div>
          </div>
        </div>
      </div>
    </section>

    <footer class="bg-gray-900 text-gray-400 py-16" id="contact">
      <div class="max-w-7xl mx-auto px-6">
        <div class="grid grid-cols-3 gap-8 mb-12">
          <div>
            <h3 class="text-xl font-['Pacifico'] text-white mb-4">{{myInfo.name}}</h3>
            <p class="text-sm">{{myInfo.desc}}</p>
          </div>
          <div>
            <h4 class="text-white font-medium mb-4">{{pageInfo.navTitle}}</h4>
            <ul class="space-y-2">
              <li v-for="(item,key) in columns" :key="key"><a href="javascript:;" class="hover:text-white transition-colors" @click="toView(item.id)">{{item.label}}</a>
              </li>
            </ul>
          </div>
          <div>
            <h4 class="text-white font-medium mb-4">{{pageInfo.contactTitle}}</h4>
            <ul class="space-y-2">
              <li><a :href="`mailto:${myInfo.mail}`" class="hover:text-white transition-colors">{{myInfo.mail}}</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="pt-8 border-t border-gray-800 text-sm text-center">
          <p>&copy; {{myInfo.copyright}}</p>
        </div>
      </div>
    </footer>
  </div>

  <script src="./js/vue.min.js"></script>
  <script src="./js/index.js?v=2.1"></script>
</body>

</html>